<template>
	<div class="login-container flex">
		<div class="login-left">
			<div class="title">企迹大数据招商平台</div>
			<div class="title-one">AI赋能产业链招商</div>
			<div class="title-two">数据驱动高质量发展</div>
			<div class="content">产业链图谱分析&nbsp;&nbsp;|&nbsp;&nbsp;产业链全景图&nbsp;&nbsp;|&nbsp;&nbsp;产业链分布图&nbsp;&nbsp;|&nbsp;&nbsp;招商地图<br>
				全量企业标签&nbsp;&nbsp;|&nbsp;&nbsp;企业画像&nbsp;&nbsp;|&nbsp;&nbsp;投资风险尽调&nbsp;&nbsp;|&nbsp;&nbsp;招商线索推荐</div>
		</div>
		<div class="login-center"></div>
		<div class="login-right flex">
			<div class="login-right-warp flex-margin">
				<div class="login-right-warp-mian">
					
					<div class="login-right-warp-main-form">
					<Account />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import logoMini from '/@/assets/logo-mini.png';
import loginMain from '/@/assets/login-main.png';
import loginBg from '/@/assets/login-bg.svg';

// 引入组件
const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));

// 定义变量内容
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const state = reactive({
	tabsActiveName: 'account',
	isScan: false,
});

// 获取布局配置信息
const getThemeConfig = computed(() => {
	return themeConfig.value;
});
// 页面加载时
onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.login-container {
	height: 100%;
	  background-image: url('/src/assets/bj.png');
	  background-size: 100% 100%;
  	  background-repeat: no-repeat;
	.login-left {
		flex: 1;
		position: relative;
		background-image: url('/src/assets/line.png');
		left:132px;
		top:200px;
		width: 618px;
		height: 404px;
		font-family: '微软雅黑';
		color:#fff;
		padding-top: 35px;
		padding-left: 70px;
		.title {
			font-size: 26px;
			background-color: #fff;
			color:#138AF2;
			padding-left: 20px;
			width: 330px;
			height: 56px;
			line-height: 50px;
			border-radius: 10px;
			letter-spacing:2px
		}
		.title-one {
			font-size: 40px;
			color:#fff;
			padding-left: 10px;
			height: 56px;
			line-height: 56px;
			border-radius: 10px;
			font-weight: bold;
			letter-spacing:5px;
			margin-top:20px;
		}
		.title-two {
			font-size: 40px;
			color:#fff;
			padding-left: 10px;
			height: 56px;
			line-height: 56px;
			border-radius: 10px;
			font-weight: bold;
			letter-spacing:5px;
			margin-top:5px;
			padding-left: 60px;
		}
		.content {
			font-size: 18px;
			margin-top: 30px;
			line-height: 35px;
		}
	}
	.login-center {
		flex: 1;
		position: relative;
		background-image: url('/src/assets/center.png');
		left:30px;
		top:350px;
		width: 514px;
		height: 428px;
		font-family: '微软雅黑';
		color:#fff;
		
	}
	.login-right {
		width: 800px;
		.login-right-warp {
			border-radius: 3px;
			width: 500px;
			height: 700px;
			position: relative;
			overflow: hidden;
			margin: 70px 20px;
			.login-right-warp-mian {
				display: flex;
				flex-direction: column;
				height: 100%;
				padding-top:200px;
				.login-right-warp-main-title {
					height: 130px;
					line-height: 130px;
					font-size: 27px;
					text-align: center;
					letter-spacing: 3px;
					animation: logoAnimation 0.3s ease;
					animation-delay: 0.3s;
					color: var(--el-text-color-primary);
				}
				.login-right-warp-main-form {
					flex: 1;
					padding: 0 50px 50px;
					.login-content-main-sacn {
						position: absolute;
						top: 0;
						right: 0;
						width: 50px;
						height: 50px;
						overflow: hidden;
						cursor: pointer;
						transition: all ease 0.3s;
						color: var(--el-color-primary);
						&-delta {
							position: absolute;
							width: 35px;
							height: 70px;
							z-index: 2;
							top: 2px;
							right: 21px;
							background: var(--el-color-white);
							transform: rotate(-45deg);
						}
						&:hover {
							opacity: 1;
							transition: all ease 0.3s;
							color: var(--el-color-primary) !important;
						}
						i {
							width: 47px;
							height: 50px;
							display: inline-block;
							font-size: 48px;
							position: absolute;
							right: 1px;
							top: 0px;
						}
					}
				}
			}
		}
	}
}
</style>
